/**
 * 2018/4/24 by xiongisxiong
 */
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

class Blink extends Component {
  constructor(props){
    super(props);
    this.state = {
       showText: true
    };

    // 每1000毫秒对showText状态做一次取反操作
    let i;
    let timer = setInterval(() => {
      i++;
      this.setState(previousState => {
        return { showText: !previousState.showText }
      })
    },1000)
    if (i === 7) { clearInterval(timer)}
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    )
  }
}

export default class BlinkApp extends Component {
  render () {
    return (
      <View>
        <Blink text='I love to blink' style={styles.red}/>
        <Blink text='Yes blinking is so great' style={{color:'blue'}}/>
        <Blink text='Why did they ever take this out of HTML' style={[styles.bigBlue, styles.red]}/>
        <Blink text='Look at me look at me look at me' style={[styles.red, styles.bigblue]}/>
      </View>
    )
  }
}

// 写样式 需要引入StyleSheet
const styles = StyleSheet.create({
  bigblue: {
    color:'blue',
    fontWeight:'bold',
    fontSize:30
  },
  red: {
    color: 'red'
  }
})